<template>
  <div class="loginBox">
    <div v-show="isQrLg">
      <div class="mask" @click="HideCodeLgFn"></div>
      <div class="qrloginbox" id="cloudCode">
        <img :src="codeImgSrc" alt="" />
      </div>
    </div>
    <div class="tourist"><span>立即体验</span></div>
    <div class="logo">
      <div class="logoImg"></div>
    </div>
    <div class="login">
      <div class="row">
        <input type="text" placeholder="请输入手机号" v-model="phoneNumber" />
      </div>
      <div class="row">
        <input type="password" placeholder="请输入密码" v-model="password" />
      </div>
      <div class="btn">
        <button @click="lgbtnFn">登录</button>
      </div>
      <div class="btn">
        <button @click="cloudClick">扫码登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  cellphoneAPI,
  loginStatusAPI,
  userDetailAPI,
  LoginQrAPI,
  LoginQrCreateAPI,
  extiLoginPAI,
  LoginCheckAPI,
} from "@/api";
let check = null;
export default {
  name: "CloudMusicLogin",

  data() {
    return {
      phoneNumber: "",
      password: "",
      //登录状态信息
      account: {},
      // 二维码遮罩
      isQrLg: false,
      // 二维码接口生成的key
      unikey: "",
      // 二维码图片base64编码
      codeImgSrc: "",
    };
  },
  methods: {
    // 手机号码登录
    async lgbtnFn() {
      //  1.判断手机号码是否正确,不正确,提示
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(this.phoneNumber)) {
        return alert("请输入正确的手机号码");
      }
      let res = await cellphoneAPI({
        phone: this.phoneNumber,
        password: this.password,
      });
      console.log(res);
      if (res.code == 200) {
        localStorage.setItem("token", res.token);
        localStorage.setItem("id", res.account.id);
        // 情况输入框内容
        this.phoneNumber = "";
        this.password = "";
        // 跳转到首页
        this.$router.push("/home");
      }
    },
    // 二维码登录
    async cloudClick() {
      this.isQrLg = true;
      // 生成key
      let keyRes = await LoginQrAPI(Date.now());
      this.unikey = keyRes.data.unikey;
      // 生成二维码
      let rqcode = await LoginQrCreateAPI(this.unikey);
      this.codeImgSrc = rqcode.data.qrimg;
      var res = await LoginCheckAPI({
        key: this.unikey,
      });
      console.log(res);
      // 每三秒check一次setInterval
      check = setInterval(async () => {
        var nowtime2 = new Date().getTime();
        var res = await LoginCheckAPI({
          key: this.unikey,
          timestamp: nowtime2,
        });
        console.log(res.code);
        console.log(res);
        if (res.code == 800) {
          alert(res.message);
          clearInterval(check);
        }
        if (res.code == 803) {
          alert(res.message);
          clearInterval(check);
          this.isQrLg = false;
          // 跳转到首页
          this.$router.push("/home");
        }
      }, 6000);
    },
    async extiLoginFn() {
      let res = await extiLoginPAI();
      console.log(res);
    },
    HideCodeLgFn() {
      this.isQrLg = false;
    },
  },
  async created() {},
};
</script>

<style lang="less" scoped>
.loginBox {
  width: 100vw;
  height: 100vh;
  background-color: #dc2c1f;
  .tourist {
    padding: 10px 20px;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    color: #eee;
    text-align: right;
    span {
      cursor: pointer;
    }
  }
  .logo {
    width: 100%;
    height: 250px;
    .logoImg {
      margin: auto;
      margin-top: 60px;
      width: 34px;
      height: 50px;
      background: url("../assets/img/topbar.png") no-repeat 0px 0px;
    }
  }
  .login {
    padding: 0 60px;
    .row {
      width: 100%;
      margin-bottom: 10px;
      input {
        text-align: center;
        width: 100%;
        outline: none;
        padding: 10px 20px;
        box-sizing: border-box;
        background-color: transparent;
        border: none;
        border-radius: 50px;
        color: #fff;
      }
      input::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #000;
      }
    }
    .btn {
      margin-bottom: 10px;
      button {
        height: 36px;
        border: none;
        width: 100%;
        border-radius: 50px;
        background-color: #fff;
        color: #dc2c1f;
      }
    }
  }

  .mask {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .qrloginbox {
    position: absolute;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>